<template>
	<view class="content">
		<view class="content_head">
			<image class="logo" src="../../static/ailogo.png" mode=""></image>
		</view>
		<view class="content_main">
			<view class="application_title">
				<view class="title">
					AI课程
				</view>
				<view class="subtitle">
					COURSE
				</view>
				<view class="FX1"></view>
			</view>
			<u-tabs @click="stateFunc" :list="categoryList" lineWidth="86" :activeStyle="{
			            color: '#333333',
			            fontWeight: 'bold',
						fontSize:'15px'
			        }" :inactiveStyle="{
						color: '#CCCCCC',
						transform: 'scale(1)'
					}" itemStyle="padding-left: 30px; padding-right: 30px; height: 34px;">
			</u-tabs>
			<view class="courseList">
				<view class="courseBox" v-for="(item,index) in productList"
					@click="gotoPage('/pages/product/detail/detail?productId='+item.productId)">
					<image class="logo" :src="item.productImage" mode=""></image>
					<view class="title">
						<text>{{item.productName}}</text>
						<view class="FX1"></view>
						<image class="like" src="../../static/yyz.png" mode=""></image>
					</view>
					<view class="novice">
						新手必备
					</view>
					<view class="coursebottom">
						<view class="box" style="margin-right: 66rpx;">
							<image src="../../static/yyy.png" mode=""></image>
							<text>{{item.viewTimes}}</text>
						</view>
						<view class="box">
							<image src="../../static/yyx.png" mode=""></image>
							<text>{{item.productSales}}</text>
						</view>
						<view class="FX1"></view>
						<view class="price">
							¥{{item.marketPrice}}
						</view>
					</view>
				</view>
			</view>

		</view>

	</view>
	<tabBar></tabBar>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				disabled: true,
				selectedCategoryId: '',
				categoryList: [],
				productList: [],
				state_active: 0,
			}
		},
		onLoad() {
			//获取分类列表
			this.getProductCategoryList();
			//课程列表
			this.getProducts();
		},
		methods: {
			/*状态切换*/
			stateFunc(item) {
				console.log(item)
				if(item.categoryId){
					this.selectedCategoryId = item.categoryId
					this.getProducts(false);
				}
				
			},
			
			activeAPP(e, index) {
				this.activeBox = index
			},
			/*获取数据*/
			getProductCategoryList() {
				let self = this;
				self._get('product/category/index?appId=' + self.appId,{}, function(res) {
					self.categoryList = res.data.list;
				});
			},
			/*获取数据*/
			getProducts(value) {
				let self = this;
				let page = self.page;
				self.loading = true;
				self._postBody('product/product/lists', {
					pageIndex: page || 1,
					categoryId: self.selectedCategoryId,
					search: '',
					sortType: 'all',
					sortPrice: 0,
					pageSize: 10,
				}, function(res) {
					self.loading = false;
					uni.stopPullDownRefresh();
					if(value){
						self.productList = self.productList.concat(res.data.records);
					}else{
						self.productList = res.data.records;
					}
					self.last_page = res.data.lastPage;
					if (res.data.lastPage <= 1) {
						self.no_more = true;
					}
				});
			},
		}
	}
</script>

<style lang='css' scoped>
	.u-tabs{
		border-bottom: 2rpx solid #CCCCCC;
	}
	/deep/.u-tabs__wrapper__nav__line{
		bottom: -1px !important;
		height: 3px !important;
	}

	.content_head {
		width: 750rpx;
		height: 600rpx;
		background-image: url('../../static/xybg.png');
		background-size: 100% 100%;

		.logo {
			width: 240rpx;
			height: 64rpx;
			padding-top: 95rpx;
			margin-left: 30rpx;
		}
	}

	.content_main {
		width: 750rpx;
		/* height: 1000rpx; */
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 41rpx 5rpx rgba(7, 67, 200, 0.28);
		border-radius: 50rpx;
		position: absolute;
		top: 528rpx;
		left: 0;
		
		.tabs {
			margin: 0 20rpx;
			display: flex;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: center;
			overflow-x: auto;
			border-bottom: 1rpx solid #CCCCCC;
		}
		.tabs::-webkit-scrollbar {
			/* //隐藏滚动条 */
			width: 0;
			height: 0;
			background-color: transparent;
		}
		.tab_item{
			white-space: nowrap;
			font-size: 30rpx;
			color: #999999;
			padding: 13rpx 50rpx;
		}
		.active{
			color: #333333;
			border-bottom: 3rpx solid #2168EA;
		}
	}

	.application_title {
		display: flex;
		align-items: center;
		padding-top: 60rpx;
		padding-bottom: 28rpx;
		padding-left: 37rpx;
		padding-right: 20rpx;

		.title {
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			margin-right: 13rpx;
		}

		.subtitle {
			font-weight: bold;
			font-size: 30rpx;
			color: #CCCCCC;
		}

		.all {
			display: flex;
			align-items: center;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 10rpx;
			}
		}

	}

	.courseList {
		padding-bottom: 170rpx;

		.courseBox {
			width: 710rpx;
			height: 190rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 22rpx 5rpx rgba(7, 67, 200, 0.1);
			border-radius: 20rpx;
			margin: 96rpx 20rpx 0 20rpx;
			position: relative;

			.logo {
				width: 210rpx;
				height: 250rpx;
				border-radius: 30rpx 30rpx 0rpx 30rpx;
				position: absolute;
				left: 0;
				bottom: 0;
			}

			.title {
				margin-left: 240rpx;
				display: flex;
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
				padding-top: 20rpx;

				.like {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}

			.novice {
				margin-left: 240rpx;
				margin-top: 15rpx;
				width: 130rpx;
				height: 40rpx;
				line-height: 40rpx;
				background: rgba(235, 241, 255, 0);
				border-radius: 10rpx;
				border: 1px solid #0F4BCB;
				font-weight: 400;
				font-size: 24rpx;
				color: #0F4BCB;
				text-align: center;
			}

			.coursebottom {
				margin-top: 26rpx;
				margin-left: 240rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #999999;

				.box {
					display: flex;
					align-items: center;
				}

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 6rpx;
				}

				.price {
					color: #0F4BCB;
					margin-right: 30rpx;
				}
			}
		}

	}
</style>